.icon-16 {
    width: 18px;
    height: 18px;
    svg {
        width: 18px;
        height: 18px;
    }
}

.http-fuzzer-hotPatch {
    :global {
        .ant-form {
            color: var(--Colors-Use-Neutral-Text-1-Title);
        }
        .ant-form-item-label > label {
            width: 100%;
            color: var(--Colors-Use-Neutral-Text-1-Title);
        }
        .ant-form-item-explain,
        .ant-form-item-extra {
            color: var(--Colors-Use-Neutral-Text-4-Help-text);
            font-size: 12px;
        }
    }
    .http-fuzzer-hotPatch-form {
        padding: 24px;
        overflow-y: auto;
        max-height: 80vh;
        .http-fuzzer-hotPatch-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            width: 100%;
            .hotPatchCodeOpen {
                display: flex;
                align-items: center;
                .info-icon {
                    margin-left: 4px;
                    svg {
                        color: var(--Colors-Use-Neutral-Disable);
                    }
                }
            }
        }
        .hotCode-editor-wrapper {
            display: flex;
            gap: 8px;
            .hotCode-editor {
                height: 100%;
                width: calc(100% - 258px);
            }
        }
        .engineConsole-icon-style {
            svg {
                width: 18px;
                height: 18px;
            }
        }
    }
    .http-fuzzer-hotPatch-heard {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        grid-gap: 16px;
        gap: 16px;
        height: 41px;
        background: var(--haeder-footer-background);
        border-bottom: 1px solid var(--header-footer-border);
        border-radius: 4px 4px 0px 0px;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: var(--Colors-Use-Neutral-Text-1-Title);
        svg {
            width: 16px;
            height: 16px;
            color: var(--Colors-Use-Neutral-Disable);
            cursor: pointer;
            &:hover {
                color: var(--Colors-Use-Main-Hover);
            }
        }
    }
    .http-fuzzer-hotPatch-debugNotice {
        display: flex;
        align-items: center;
        .btn-box {
            margin-left: 8px;
        }
    }
}

.hotCodeTemp-save {
    .btn-box {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        gap: 10px;
        margin-top: 29px;
    }
}

.hotCode-list {
    border-radius: 4px;
    overflow-y: auto;
    .hotCode-tab-btns {
        :global {
            .ant-radio-button-wrapper {
                padding: 0 34px;
            }
        }
    }
    .hotCode-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 28px;
        border-radius: 4px;
        padding: 0 2px;
        &-input {
            height: 24px;
        }
        &-cont {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: 0 4px;
            border-radius: 4px;
            cursor: pointer;
            .hotCode-item-name {
                width: calc(100% - 10px);
                font-size: 12px;
                color: var(--Colors-Use-Neutral-Text-1-Title);
                font-weight: 400;
            }
            .extra-opt-btns {
                display: none;
                width: 65px;
                text-align: right;
            }
            &:hover {
                background-color: var(--Colors-Use-Neutral-Bg);
                .extra-opt-btns {
                    display: block;
                }
            }
        }
    }
    .hotCode-item-select {
        .hotCode-item-name {
            color: var(--Colors-Use-Main-Primary);
        }
    }
}

.hotCode-popover {
    width: 429px;

    :global {
        .ant-popover-inner-content {
            height: 40vh;
            padding: 4px;
        }

        .ant-popover-inner {
            border-radius: 4px;
        }

        .ant-popover-arrow {
            right: 0;
        }

        .ant-popover-placement-top,
        .ant-popover-placement-topLeft,
        .ant-popover-placement-topRight {
            padding-bottom: 8px;
        }
    }
}
